<template>
    <div>
        <div class="flex flex-col" v-if="queryInfo.length">
            <div
                v-for="item in queryInfo"
                :key="item.name"
                class="
                    flex flex-row
                    outline
                    justify-between
                    hover:bg-gray-100
                    transition
                    px-4
                    py-2
                    rounded-lg
                "
            >
                <div
                    class="flex flex-col w-4/5 cursor-pointer"
                    @click="$emit('showPackage', item)"
                >
                    <div class="title text-2xl">
                        {{ item.name }}
                    </div>

                    <div class="desc text-sm overflow-ellipsis truncate w-80">
                        {{ item.description }}
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <a
                            class="Icon"
                            v-if="item.homepage"
                            :href="item.homepage"
                            target="_blank"
                            >home</a
                        >
                        <a
                            class="Icon"
                            :href="`https://registry.npmjs.org/${item.name}/-/${item.name}-${item.version}.tgz`"
                            target="_blank"
                            >download</a
                        >
                        <a
                            class="Icon"
                            :href="`https://openbase.com/js/${item.name}`"
                            target="_blank"
                            >auto_graph</a
                        >
                        <a
                            class="Icon"
                            :href="`https://www.npmjs.com/package/${item.name}`"
                            target="_blank"
                            >leaderboard</a
                        >
                    </div>
                    <div class="text-sm">
                        <span class="license"
                            ><span class="Icon">balance</span
                            >{{ item.license }}</span
                        >
                        <span class="version"
                            ><span class="Icon">sell</span
                            >{{ item.version }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <van-empty v-else image="error" description="没有项目哦" />
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    computed: {
        ...mapState({
            queryInfo: (state) => state.deliver.npmBox,
        }),
    },
};
</script>

<style lang="less" scoped></style>
